<template>
  <div class>
    <PageTitle :title="pageTitle"></PageTitle>
    <div class="form-wrapper">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="证件照(正面)" prop="coverFileList">
          <el-image
            style="max-width: 200px; max-height: 200px"
            :src="ruleForm.front"
            :preview-src-list="[ruleForm.front]"
          ></el-image>
        </el-form-item>
        <el-form-item label="证件照(背面)" prop="coverFileList">
          <el-image
            style="max-width: 200px; max-height: 200px"
            :src="ruleForm.back"
            :preview-src-list="[ruleForm.back]"
          ></el-image>
        </el-form-item>
        <el-form-item v-if="ruleForm.copyright" label="版权照片" prop="coverFileList">
          <el-image
            style="max-width: 200px; max-height: 200px"
            :src="ruleForm.copyright"
            :preview-src-list="[ruleForm.copyright]"
          ></el-image>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="submitForm()">审核通过</el-button>
          <el-button @click="go()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import PageTitle from "@/components/pageTitle/PageTitle.vue";
import Upload from "@/components/upload/Upload.vue";
import UploadVideo from "@/components/uploadVideo/UploadVideo.vue";
export default {
  name: "GoodsAdd",
  components: {
    PageTitle,
    Upload,
    UploadVideo
  },
  activated() {
    console.log("this.$route---------", this.$route);
    if (this.$route.params.id) {
      this.getList(this.$route.params.id);
      this.id = this.$route.params.id;
    }
  },
  data() {
    return {
      ruleForm: {
        name: null,
        mobile: null, //联系方式
        address: null, //地址
        front: null, //图片正面
        back: null, //图片背面
        copyright: null, //版权
        coverFileList: [] //type: 1 为图片  type: 2 为视频
      },
      id: null,
      loading: false
    };
  },
  watch: {},
  computed: {
    pageTitle() {
      return "内容中心";
    }
  },
  methods: {
    async getList(id) {
      let {data:{code,data}} = await this.$axios({
        url: this.$api + "/v1/personal/deta",
        method: "GET",
        params: {
          id: id
        }
      });
      console.log("详情data-------------", data,'code--',code);
      if (code == 0) {
        
        this.ruleForm.name = data.items.name;
        this.ruleForm.mobile = data.items.mobile;
        this.ruleForm.address = data.items.address;
        if (data.data[1][0]) {
          this.ruleForm.front = data.data[1][0].url; //正面
        }
        if (data.data[2][0]) {
          this.ruleForm.back = data.data[2][0].url; //反面
        }
        if (data.data[0][0]) {
          this.ruleForm.copyright = data.data[0][0].url;
        } else {
          this.ruleForm.copyright = null;
        }
      }
    },
    // 提交表单
    async submitForm() {
      this.loading = true;
      let data = await this.$axios({
        url: this.$api + "/v1/personal/trial",
        method: "POST",
        data: {
          id: this.id
        }
      });
      this.loading = false;
      if (data.data.code == 0) {
        this.$message({
          message: data.data.data,
          type: "success"
        });
        this.ruleForm = {
          name: null,
          mobile: null, //联系方式
          address: null, //地址
          front: null, //图片正面
          back: null, //图片背面
          copyright: null, //版权
          coverFileList: [] //type: 1 为图片  type: 2 为视频
        };
        this.$router.go(-1);
      }
      console.log("提交审核-------", data);
    },
    //返回
    go() {
      this.ruleForm = {
        name: null,
        mobile: null, //联系方式
        address: null, //地址
        front: null, //图片正面
        back: null, //图片背面
        copyright: null, //版权
        coverFileList: [] //type: 1 为图片  type: 2 为视频
      };
      this.$router.go(-1);
    }
  }
};
</script>

<style lang='scss'>
.form-wrapper {
  width: 50%;
}
.video {
  display: flex;
  flex-wrap: wrap;
}
.video .item {
  margin: 20px;
  max-width: 300px;
}
.video .item video {
  width: 100%;
}
</style>
